<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    content=[{username:"Tina",  login_date:"2020-09-20 19:30:00"},
            {username:"Tom", login_date:"2020-09-28 14:08:20"},
            {username:"Jack",  login_date:"2020-10-10 17:50:26"}];

    var nowChoose=-1;

    $(document).ready(function(){
		//为表格元素设置点击事件
		$("#tab").click(function(){
			//获取被点击的table元素
			var elem_table = this;
			//获取被点击的单元格元素（td类型）
			var elem_cell = event.srcElement;	
			//获取被点击的行td元素
			var elem_tr = event.srcElement.parentElement;
			//获取被点击的行号（索引）、列号（索引）
			var row = elem_tr.rowIndex;
			var col = elem_cell.cellIndex;	
			//修改被选中行的css颜色
            if(nowChoose!=-1)
                $("#tab tr:eq("+nowChoose+")").css("background-color","white");
			$("#tab tr:eq("+row+")").css("background-color","yellow");
            nowChoose=row;
		})
	});

    function transTd(obj,needTr=true)
    {
        var ret="<td>"+obj['username']+"</td><td>"
            +obj['login_date']+"</td>";
        if(!needTr)
            return ret;
        else
            return "<tr>"+ret+"</tr>";
    }
    
    function load(content)
    {
        var result='';
        for(var i in content)
        {
            $('#tab').append(transTd(content[i]));
        }
    }

    function remove()
    {
        if(nowChoose==-1)
            alert('当前没有选中任何行');
        else
            $('#tab tr:eq('+nowChoose+')').remove();
    }

    function add()
    {
        var name=document.forms["addForm"]["name"].value;
        var time=document.forms["addForm"]["time"].value;
        var obj={'username':name, 'login_date':time};
        var htmlCode=transTd(obj);
        $('#tab').append(htmlCode);
        return false;
    }

    function modify()
    {
        if(nowChoose==-1)
            alert('当前没有选中任何行');
        else
        {
            var name=document.forms["modForm"]["name"].value;
            var time=document.forms["modForm"]["time"].value;
            var obj={'username':name, 'login_date':time};
            var htmlCode=transTd(obj,false);
            $("#tab tr:eq("+nowChoose+")").html(htmlCode);
        }
        return false;
    }
</script>

<button type="button" onclick="load(content)">加载</button>
<br>

<table border="1" id="tab">
</table>

<br>
<button type="button" onclick="remove()">删除行</button>

<br>
<form id="add" name="addForm" onsubmit="return add()">
    <span>添加行</span>
    <br>
    <span> name</span>
    <input type="text" name="name" value="">
    <br>
    <span>time</span>
    <input type="text" name="time" value="">
    <br>
    <input type="submit" value="确认添加">
</form>

<br>
<form id="mod" name="modForm" onsubmit="return modify()">
    <span>修改行</span>
    <br>
    <span> name</span>
    <input type="text" name="name" value="">
    <br>
    <span>time</span>
    <input type="text" name="time" value="">
    <br>
    <input type="submit" value="确认修改">
</form>